<template>
  <div>
    <div style="width: 190px; float: left">
      <el-row class="tac">
        <el-col :span="23">
          <!--handleSelect方法就是点击选择，就会执行的方法  -->
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @select="handleSelect"
            @open="handleSelect"
            @close="clearSelect"
          >
            <!-- v-for扫描二级路由,val就是子库数组,key就是父库名,index就是对应的索引 -->
            <div v-for="(val, key, index) in pools" :key="index">
              <!-- 这是一级路由 -->
              <el-submenu :index="key">
                <template slot="title">{{ key }}</template>
                <div v-for="(item, i) in val" :key="i">
                  <el-menu-item :index="item">{{ item }}</el-menu-item>
                </div>
              </el-submenu>
            </div>
          </el-menu>
        </el-col>
      </el-row>
    </div>
    <div style="float: left">
      <MySearch v-on:listenToChild="showMsgFromChild"></MySearch>
      <div>
        <el-table :data="questions" style="width: 100%">
          <el-table-column type="selection" prop="id" label="序号" width="30">
          </el-table-column>
          <el-table-column type="index" label="序号" width="100" align="center">
            <template slot-scope="scope">
              <span>{{
                (pageLine.page - 1) * pageLine.limit + scope.$index + 1
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="content"
            label="试题题干"
            width="100"
            align="center"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column label="类型" width="100" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.type == 1">单选</span>
              <span v-else-if="scope.row.type == 2">多选</span>
              <span v-else-if="scope.row.type == 3">判断</span>
              <span v-else-if="scope.row.type == 4">填空</span>
              <span v-else>简答</span>
            </template>
          </el-table-column>
          <el-table-column label="难度" width="100" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.level == 1">简单</span>
              <span v-else-if="scope.row.level == 2">中等</span>
              <span v-else-if="scope.row.level == 3">困难</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
              <el-button @click="updateOne(scope.row)" type="text"
                >修改</el-button
              >
              <el-button @click="getDetail(scope.row)" type="text"
                >查看</el-button
              >
              <el-button @click="delOne(scope.row)" type="text">删除</el-button>
              <el-dialog
                title="题目"
                :visible.sync="visible"
                width="30%"
                :before-close="handleClose"
              >
                <div>
                  <el-form
                    :inline="true"
                    :model="issue"
                    class="demo-form-inline"
                  >
                    <el-form-item label="试题题干">
                      <el-input
                        v-model="issue.content"
                        placeholder="比如:3*5"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="试题类型">
                      <el-select v-model="issue.type" placeholder="请选择类型">
                        <el-option label="单选" value="1"></el-option>
                        <el-option label="多选" value="2"></el-option>
                        <el-option label="判断" value="3"></el-option>
                        <el-option label="填空" value="4"></el-option>
                        <el-option label="简答" value="5"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="试题难度">
                      <el-select v-model="issue.level" placeholder="请选择难度">
                        <el-option label="简单" value="1"></el-option>
                        <el-option label="中等" value="2"></el-option>
                        <el-option label="困难" value="3"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="所属年级">
                      <el-select
                        v-model="issue.sonPool.poolName"
                        placeholder="请选择年级"
                      >
                        <el-option label="一年级" value="一年级"></el-option>
                        <el-option label="二年级" value="二年级"></el-option>
                        <el-option label="三年级" value="三年级"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="visible = false">取 消</el-button>
                  <el-button type="primary" @click="visible = false"
                    >确 定</el-button
                  >
                </span>
              </el-dialog>
            </template>
          </el-table-column>
          <el-table-column  prop="updateTime" label="修改时间" width="180" align="center">
          </el-table-column>
        </el-table>
        <!-- 由父组件的page参数单项绑定，更新子数据 -->
        <Page v-bind:child-msg="pageparm" @callFather="callFather"></Page>
      </div>
    </div>
  </div>
</template>

<script>
import MySearch from "@/views/issue/search_issue.vue";
// 封装的axios请求
import { getData } from "@/utils/Util";
//导入分页组件
import Page from "@/views/issue/pages.vue";
export default {
  data() {
    return {
      issue: {
        pool: {
          poolName: "",
        },
        sonPool: {
          poolName: "",
        },
        type: "",
        level: "",
        content: "",
      },
      //接收查询全部传过来的值
      questions: [],
      //对话框状态
      visible: false,
      //接收题库数据
      pools: {},
      //接收分页子组件的数据，这个数据需要发送到后端进行分页处理
      pageLine: {
        page: 1,
        limit: 5,
      },
      // 分页参数，父组件初始数据单项绑定-->指向分页子组件的childMsg
      pageparm: {
        currentPage: 1,
        pageSize: 5,
        total: 0,
      },
    };
  },
  methods: {
    //条件+分页查询
    findByCond() {
      // 发送用的pageLine里面的分页参数
      this.$axios
        .post("http://localhost:8080/issue/findByCond", {
          data: this.issue,
          page: this.pageLine.page,
          limit: this.pageLine.limit,
        })
        .then((res) => {
          console.log(res);
          this.questions = res.data.data.list;
          //更新父组件传给子的分页参数 ，接收用的pageperm里面的参数
          this.pageparm.total = res.data.data.total;
          this.pageparm.currentPage = res.data.data.pageNum;
          this.pageparm.pageSize = res.data.data.pageSize;
        })
        .catch((err) => {
          this.$message("没有该条件的数据");
          this.questions = "";
        });
    },
    // 父组件接收子组件的参数变化-->子组件参数变化触发的函数
    callFather(parm) {
      console.log(parm);
      this.pageLine.page = parm.currentPage;
      this.pageLine.limit = parm.pageSize;
      //然后再次调用页面加载的方法
      this.findByCond();
    },
    //获取keyPath，其中还有父名
    handleSelect(key, keyPath) {
      if (keyPath.length == 1) {
        this.issue.pool.poolName = keyPath[0];
      } else {
        this.issue.pool.poolName = keyPath[0];
        this.issue.sonPool.poolName = keyPath[1];
      }
      this.pageLine.page = 1;
      this.findByCond();
    },
    //菜单回拉就清空model中的数据
    clearSelect() {
      this.issue.pool.poolName = "";
      this.issue.sonPool.poolName = "";
      this.pageLine.page = 1;
      //然后在调用查询函数发送，使得model数据变化
      this.findByCond();
    },
    //接收子组件传来的值,并给自己的参数赋值
    showMsgFromChild(jsonData) {
      this.issue.type = jsonData.type;
      this.issue.level = jsonData.level;
      this.issue.content = jsonData.content;
      this.pageLine.page = 1;
      //接收完参数，再发送asios请求，动态加载
      this.findByCond();
    },
    //点击对话框的x就可以
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    getDetail(row) {
      //跳转到另一个路由页面
      this.$router.push({
        path: "/issue/detail",
        query: {
          id: row.id,
        },
      });
    },
    updateOne(row) {
      this.$router.push({
        path: "/issue/add",
        query: {
          id: row.id,
        },
      });
    },
    delOne(row) {
      this.$confirm("此操作将永久删除该题目, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .delete("http://localhost:8080/issue/delOne/" + row.id)
            .then((res) => {
              this.findByCond();
            });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  // 页面加载的时候
  created() {
    this.findByCond();
    //发送请求获取动态菜单
    this.$axios.post("http://localhost:8080/pool/findfpool").then((res) => {
      this.pools = res.data.data;
    });
  },
  components: {
    MySearch,
    Page,
  },
};
</script>